<template>
    <div class="login-container">
        <div class="title1">管理后台</div>
        <div class="login-box">
            <div class="title2">欢迎登录</div>
            <div class="username">
                <el-input type="text" v-model="username" placeholder="请输入账号">
                    <template #prefix>
                        <img class="img" src="../assets/login/denglu.png" />
                    </template>
                </el-input>
            </div>
            <div class="password">
                <el-input type="password" v-model="password" placeholder="请输入密码">
                    <template #prefix>
                        <img class="img" src="../assets/login/mima.png" />
                    </template>
                </el-input>
            </div>
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import LoginApi from '../api/LoginApi';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import axios from 'axios';
// 使用ref创建响应式数据
const username = ref('');
const password = ref('');
// 用于存储token的响应式变量
const token = ref(''); 

const router = useRouter();
// 定义登录函数
const login = async () => {
    if (!username.value ||!password.value) {
        ElMessage.error('账号和密码不能为空，请输入完整信息');
        return;
    }
    try {
        // 调用登录接口，假设LoginApi.login接收一个包含用户名和密码的对象作为参数，你需要根据实际接口情况调整
        const response = await LoginApi.login({
            username: username.value,
            password: password.value
        });
        if (response.code === 200) {
            // 获取登录成功返回的token并存储
            token.value = response.data.token;
            // 将token存储到localStorage中，键名为'token'，你可以根据实际情况调整键名
            localStorage.setItem('token', token.value);
            // 设置axios的请求拦截器，将token添加到后续请求的请求头中
            axios.interceptors.request.use(config => {
                //config.headers.token = `${token.value}`;
                config.headers['token'] = token.value;
                return config;
            });
            console.log(token.value);
            // 登录成功提示
            ElMessage.success('登录成功');

            // 这里可以根据实际业务逻辑，比如跳转到管理后台的首页等操作
            router.push('/list');
        } else {
            // 登录失败提示，展示接口返回的错误信息，如果有的话
            ElMessage.error(response.message || '登录失败，请稍后重试');
        }
    } catch (error) {
        // 捕获接口请求过程中的其他错误，比如网络问题等
        ElMessage.error('网络异常，请检查网络连接后重试');
        console.error(error);

    }
};
</script>

<style scoped>
.title1 {
    font-size: 40px;
    color: #21d3ca;
    margin-bottom: 20px;
}

.title2 {
    font-size: 20px;
    color: #21d3ca;
    margin-bottom: 20px;
}

.username,
.password {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #e6e6e6;
}

:deep(.el-input__wrapper) {
    background-color: rgba(0, 0, 0, 0);
}

.img {
    width: 25px;
    height: 25px;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-box {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 50px;
    text-align: center;
    height: 200px;
    width: 250px;
}

h1 {
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #21d3ca;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
</style>